<template>
 	<div class="layui-layout layui-layout-admin zlgj-bgpage" id="provin02" style="overflow-y: scroll;">
       <div class="logo" style="background:url(../../../static/other/css/zlgj/images/clogo1.png) left top no-repeat;background-size:contain;"></div>
       <div class="foot">
         <Secondnav urlname='provin02'></Secondnav>
       </div>
       <div class="viewport" style="min-height: auto;">
        <div class="column">
          <div class="phb01">
          	<div class="phbcon">
	          	<dl class="ts" @click="choose(0)">
	          		<dt><img src="../../../static/other/css/zlgj/images/pimg01.jpg"></dt>
	          		<dd><span>杭州清河坊步行街</span></dd>
	          	</dl>
	          	<dl  @click="choose(1)">
	          		<dt><img src="../../../static/other/css/zlgj/images/pimg02.jpg"></dt>
	          		<dd><span>绍兴鲁迅中路步行街</span></dd>
	          	</dl>
	          	<dl @click="choose(2)">
	          		<dt><img src="../../../static/other/css/zlgj/images/pimg03.jpg"></dt>
	          		<dd><span>杭州星光大道电影文化步行街</span></dd>
	          	</dl>
	          	 <!--<dl>
		          		<dt><img src="../../../static/other/css/zlgj/images/pimg04.jpg"></dt>
		          		<dd><span>温州五马禅街</span></dd>
		          	</dl>
		          	<dl>
		          		<dt><img src="../../../static/other/css/zlgj/images/pimg05.jpg"></dt>
		          		<dd><span>宁波老外滩步行街</span></dd>
		          	</dl>
		          	<dl>
		          		<dt><img src="../../../static/other/css/zlgj/images/pimg06.jpg"></dt>
		          		<dd><span>衢州水亭门步行街</span></dd>
		          	</dl>
		          	<dl>
		          		<dt><img src="../../../static/other/css/zlgj/images/pimg07.jpg"></dt>
		          		<dd><span>杭州中国丝绸城步行街</span></dd>
		          	</dl>-->
		        </div>
          </div>
        </div>
        <div class="column">
            <div class="map" style="height:485px;">
                <h3>全省21条街综合指数图</h3>
                <div class="chart">
                    <div class="geo">
                    	<div id='btb01' style="width: 100%;height:100%;"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="column">
        	<div class="phb01">
        		<div class="phbcon1">
		           <dl @click="choose(3)">
		          		<dt><img src="../../../static/other/css/zlgj/images/img04.jpg"></dt>
		          		<dd><span>温州瑞安忠义街</span></dd>
		          	</dl>
		          	<dl @click="choose(4)">
		          		<dt><img src="../../../static/other/css/zlgj/images/img05.jpg"></dt>
		          		<dd><span>湖州爱山广场步行街</span></dd>
		          	</dl>
		          	<dl @click="choose(5)">
		          		<dt><img src="../../../static/other/css/zlgj/images/img06.jpg"></dt>
		          		<dd><span>嘉兴月河步行街</span></dd>
		          	</dl>
		          	<!--<dl>
		          		<dt><img src="../../../static/other/css/zlgj/images/img06.jpg"></dt>
		          		<dd><span>湖州南潯东大街</span></dd>
		          	</dl>
		          	<dl>
		          		<dt><img src="../../../static/other/css/zlgj/images/img03.jpg"></dt>
		          		<dd><span>湖州长兴东鱼坊步行街</span></dd>
		          	</dl>-->
		        </div>
	         </div>
        </div>
    </div>
    <div class="myflex" style="padding-bottom:50px;">
    	<div class="mycolumn">
    		<div class="point panel">
                <div class="inner">
                    <h3>品牌影响力指数图</h3>
                    <div class="chart">
                       <div id="btb02" style="height: 200px;width:100%;"></div>
                    </div>
                </div>
            </div>
    	</div>
    	<div class="mycolumn">
    		<div class="point panel">
                <div class="inner">
                    <h3>夜间经济指数图(下午6点起到第二天6点止)</h3>
                    <div class="chart">
                       <div id="btb03" style="height: 200px;width:100%;"></div>
                    </div>
                </div>
            </div>
    	</div>
    	<div class="mycolumn">
    		<div class="point panel">
                <div class="inner">
                    <h3>活动频度指数图</h3>
                    <div class="chart">
                       <div id="btb05" style="height: 200px;width:100%;"></div>
                    </div>
                </div>
            </div>
    	</div>
    	<div class="mycolumn">
    		<div class="point panel">
                <div class="inner">
                    <h3>景气度指数图</h3>
                    <div class="chart">
                       <div id="btb04" style="height: 200px;width:100%;"></div>
                    </div>
                </div>
            </div>
    	</div>
    	<div class="mycolumn">
    		<div class="point panel">
                <div class="inner">
                    <h3>满意度指数图</h3>
                    <div class="chart">
                       <div id="btb06" style="height: 200px;width:100%;"></div>
                    </div>
                </div>
            </div>
    	</div>
    </div>
</div>
</template>
<script>
	import echarts from 'echarts'
	import Pagetop from '../common/pagetop.vue'
	import Secondnav from './provinnav.vue'
    import 'echarts/extension/bmap/bmap'
	export default {
	  name: 'index',
	  components: {Pagetop,Secondnav},
	  data () {
	    return {
	        itemData:'',
	        sqlist:'',
	        index:0,
	        isclick:0,
	        st:'',
	        type:localStorage.getItem("type")
	    }
	  },
	  mounted(){
	  	this.getfg()
	  	this.gettb02()
	  	this.gettb03()
	  	this.gettb04()
	  	this.gettb06()
	  	this.gettb05()
	  	var _this=this;
//	  	this.st=setTimeout(function(){
//	  		_this.doimg();
//	  	},10000)
	  },
	  methods: {
	  	choose:function(num){
	  		this.isclick=1;
	  		this.index=num-1
	  		this.doimg();
	  	},
	  	doimg:function(){
	  		var _this=this;
	  		var length=$(".phbcon dl").length;
	  		var length1=$(".phbcon1 dl").length;
	  		var len=length+length1;
	  		var index=this.index;
	  		var nindex=index+1;
	  		this.index=nindex;
	  		if(nindex<=length){
		  		if(nindex<length-2){
		  			var m=-170*nindex+'px';
		  			//$(".phbcon").animate({marginTop:m},'slow');
		  		}
		  		if(nindex==length){
		  			$(".phbcon").animate({marginTop:0});
		  		}
		  		$(".phb01 dl").removeClass("ts");
	  			$(".phbcon dl").eq(nindex).addClass("ts")
	  			if(nindex==length){
		  			$(".phbcon1 dl").eq(0).addClass("ts")
		  		}

		  	}
	  		else{

	  			if(nindex<=len-1){
	  				var m=-170*(nindex-length)+'px';
		  			//$(".phbcon1").animate({marginTop:m},'slow');
		  			$(".phb01 dl").removeClass("ts");
	  				$(".phbcon1 dl").eq(nindex-length).addClass("ts")
	  			}
	  			if(nindex==len){
		  			$(".phbcon1").animate({marginTop:0});
		  			nindex=0;
		  			this.index=0;
		  			$(".phb01 dl").removeClass("ts");
	  				$(".phbcon dl").eq(nindex-length).addClass("ts")
		  		}

	  		}

		  	this.getfg()
		  	this.gettb02()
		  	this.gettb03()
		  	this.gettb04()
		  	this.gettb06()
		  	this.gettb05()
//	  		this.st=setTimeout(function(){
//	  			if(_this.isclick==0){
//		  			_this.doimg();
//		  		}
//	  			_this.isclick=0
//		  	},10000)
	  	},
	  	gettb04:function(){
	  		var baifenbi = [0.333, 0.444, 0.555, 0.777, 0.888];
			var grayBar = [1, 1, 1, 1, 1, ];
			var paiming = [ 5, 4, 3, 2, 1];
			var xingm = ['6-06', '6-07', '6-08', '6-09', '6-10'];
			var option = {

			     grid: {
			         left: '5%',
			         right: '5%',
			         bottom: '5%',
			         top: '5%',
			         containLabel: true
			     },
			    xAxis: [{
			            show: false,
			       },
			        {
			            show: false,
			        }
			    ],
			    yAxis: {
			        type: 'category',
			        axisLabel: {
			            show: true, //让Y轴数据不显示
			        },

			        axisTick: {
			            show: false, //隐藏Y轴刻度
			        },
			        axisLine: {
			            show: false, //隐藏Y轴线段
			        },
			    },
			    series: [
			        //背景色
			        {
			            show: true,
			            type: 'bar',
			            barGap: '-100%',
			            barWidth: '10%', //统计条宽度
			            itemStyle: {
			                normal: {
			                    barBorderRadius: 50,
			                    color: 'rgba(41, 55, 94)'
			                },
			            },
			            z: 1,
			            data: grayBar,
			        },
			        //蓝条
			        {
			            show: true,
			            type: 'bar',
			            barGap: '-100%',
			            barWidth: '10%', //统计条宽度
			            itemStyle: {
			                normal: {
			                    barBorderRadius: 50, //统计条弧度
			                    color: {
			                        colorStops: [{
			                             offset: 0,
			                             color: '#5d29f7' // 0% 处的颜色
			                         }, {
			                             offset: 1,
			                             color: '#5093fb' // 100% 处的颜色
			                         }],
			                        globalCoord: false, // 缺省为 false

			                    }
			                },
			            },
			            max: 1,
			            label: {
			                normal: {
			                    show: true,
			                    textStyle: {
			                        color: '#fff', //百分比颜色
			                    },
			                    position: [0, '-20'],
			                    rich: { //富文本
			                        yellow: {
			                            color: '#FEC735',
			                        }
			                    },
			                    formatter: function(data) {
			                        //富文本固定格式{colorName|这里填你想要写的内容}
			                        if(paiming[data.dataIndex] == 1||paiming[data.dataIndex] == 2||paiming[data.dataIndex] == 3){
			                        	return '{yellow|' + '  ' + xingm[data.dataIndex] + '}';
			                        }else{
			                        	return  '  ' + xingm[data.dataIndex]
			                        }

			                    },

			                }
			            },
			          data: baifenbi,
			        },

			    ]
			};

			let myChart = echarts.init(document.getElementById('btb04'))
			myChart.clear();
	        myChart.setOption(option,true);
	  	},
	  	gettb05:function(){
	  		var option = {
		     	color:["#fd8f1e","#7cb5ec","#4280f1"],
			    tooltip: {
			        trigger: 'axis',
			        axisPointer: { // 坐标轴指示器，坐标轴触发有效
			            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
			        }
			    },
		   		grid: {
			        left: '5%',
			        right: '5%',
			        bottom: '5%',
			        top: '-10px',
			        containLabel: true,
			        z: 10
			    },

			    legend: {
			        data: ['上午', '中午', '下午'],
			        textStyle: {
			            fontSize: 12,
			            color:"#fff"
			        },
			        icon:"rect",
			        itemWidth:8,
			        itemHeight:8,
			        bottom:"9%"
			    },

			    xAxis: {
			    	name:'次数',
			    	nameTextStyle:{
			    		color:"#fff"
			    	},
			        axisLabel:{
			            textStyle: {
			                color:'#fff',
			                 fontSize:12,
			            }
			        },
			        splitLine: {
			            lineStyle: {
			                color: "#24214e",
			            }
			        },
					 axisLine: {
			            lineStyle: {
			                type: 'solid',
			                color:'#24214e',
			                width:'1  ',                                                //坐标线的宽度
			            }
			        }
			    },
			    yAxis: {
			        data: ['2020.02', '2020.03', '2020.04', '2020.05', '2020.06'],
			        axisLabel: {
				            textStyle: {
				                color: '#fff',
				                 fontSize:12,//坐标值得具体的颜色
				            }
				        },
				        axisLine: {
				             lineStyle: {
				                type: 'solid',
				                color:'#24214e',
				                width:'1  ',                                                //坐标线的宽度

				            }
				        },
			    },
			    series: [{
			            name: '上午',
			            type: 'bar',
			            stack: '总量',
			            barWidth:20,
			            label: {
			                normal: {
			                    show: false,
			                    position: 'insideRight'
			                }
			            },
			            data: [6, 4, 10, 8, 7]
			        }, {
			            name: '中午',
			            type: 'bar',
			            barWidth:20,
			            stack: '总量',
			            label: {
			                normal: {
			                    show: false,
			                    position: 'insideRight'
			                }
			            },
			            data: [8, 10, 4, 5, 6]
			        }, {
			            name: '下午',
			            type: 'bar',
			            stack: '总量',
			            barWidth:20,
			            label: {
			                normal: {
			                    show: false,
			                    position: 'insideRight'
			                }
			            },
			            data: [6, 4, 10, 8, 7]
			        }

			    ]

			};
			let myChart = echarts.init(document.getElementById('btb05'))
			myChart.clear();
	        myChart.setOption(option);
	  	},
	  	 getfg:function(){
	        var option = {
			    color: ['#623ad1', '#3383fc'],
			    tooltip: {},
			    radar: [{
			        indicator: [{
			                text: '品牌影响力指数',
			                max: 100
			            },
			            {
			                text: '夜间经济指数',
			                max: 100
			            },
			            {
			                text: '活动频度指数',
			                max: 100
			            },
			            {
			                text: '景气度指数',
			                max: 100
			            },
			            {
			                text: '满意度指数',
			                max: 100
			            }
			        ],
			        center: ['50%', '60%'],
			        radius: '65%',
			        startAngle: 90,
			        name: {
			            formatter: '{value}',
			            textStyle: {
			                fontSize: 12, //外圈标签字体大小
			                color: '#FFF' //外圈标签字体颜色
			            }
			        },
			        splitArea: { // 坐标轴在 grid 区域中的分隔区域，默认不显示。
			            show: true,
			            areaStyle: { // 分隔区域的样式设置。
			                color: [], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
			            }
			        },
			        axisLine: { //指向外圈文本的分隔线样式
			            lineStyle: {
			                color: '#24214e'
			            }
			        },
			        splitLine: {
			            lineStyle: {
			                color: '#217ccb', // 分隔线颜色
			                width: 1, // 分隔线线宽
			            }
			        }
			    }, ],
			    series: [{
			        name: '雷达图',
			        type: 'radar',
			        data: [
			       {
			            name: '2017',
			            value: [50, 80, 45, 30, 75],
			            symbolSize:0,
			            areaStyle: {
			                normal: { // 单项区域填充样式
			                    color: {
			                        type: 'linear',
			                        x: 0, //右
			                        y: 0, //下
			                        x2: 1, //左
			                        y2: 1, //上
			                        colorStops: [{
			                            offset: 0,
			                            color: '#3cd2f3'
			                        },
			                        {
			                            offset: 1,
			                            color: '#306eff'
			                        }],
			                        globalCoord: false
			                    },
			                    opacity: 1 // 区域透明度

			                }
			            },
			        }]
			    }]
			};
	        let myChart = echarts.init(document.getElementById('btb01'))
	        myChart.setOption(option);
	      },
	      gettb02:function(){
	      	var option={

				tooltip: {
					trigger: "item",
					formatter: "{a} <br/>{b} : {c} ({d}%)"
				},
				series: [
	              {
	                  name: '访问来源',
	                  type: 'pie',
	                  radius:'50%',
	                  avoidLabelOverlap: false,
	                  label: {
	                      show: false,
	                      position: 'center'
	                  },

	                  emphasis: {
	                      label: {
	                          show: true,
	                          fontSize: '30',
	                          fontWeight: 'bold'
	                      }
	                  },
	                  labelLine: {
	                      show: false
	                  },
	                  itemStyle:{
				        normal:{
				           label:{
				              show: true,
				              formatter: '{b}:{d}%'
				           },
				           labelLine :{show:true},
				           color:function(params) {
	                            var colorList = [
                                    '#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000',
                                ];
                                return colorList[params.dataIndex]
	                        }
						}
					  },
	                  data: [{
						value:252,
						name: "万达"
					}, {
						value: 610,
						name: "海底捞"
					}, {
						value: 320,
						name: "肯德基"
					}, {
						value: 535,
						name: "麦当劳"
					}, {
						value: 100,
						name: "卡丹奴"
					}]
	              }
	          ]


			}
	      	let myChart = echarts.init(document.getElementById('btb02'))
	      	myChart.clear();
	        myChart.setOption(option);
	      },
	      gettb03:function(){
	      	var option={
				grid: {
			        left: '0%',
			        right: '3%',
			        bottom: '10%',
			        top:'5%',
			        containLabel: true
			    },
				xAxis: [{
					type: "category",
			          axisLine: {
			              lineStyle: {
			                  color: "#b0c5e4",
			              }
			          },
					data:['6-01','6-02', '6-03', '6-04', '6-05', '6-06', '6-07', '6-08', '6-09', '6-10']
				}],
				yAxis: [{
					type: "value",
			          axisLine: {
			              lineStyle: {
			                  color: "#b0c5e4",
			              }
			          }
				}],
				series: [{
					type: "line",
					data: [200, 300, 400, 610, 150, 270, 380,200, 300, 400]
				}]
			}
	      	let myChart = echarts.init(document.getElementById('btb03'))
	      	myChart.clear();
	        myChart.setOption(option);
	     },
	     gettb06:function(){
	     	 var option = {
				barWidth :10,
		    grid: {
		        left: '3%',
		        right: '3%',
		        bottom: '3%',
		        top:'3%',
		        containLabel: true
		    },
		    xAxis: {
		        type: 'value',
		        boundaryGap: [0, 0.01],
		        axisLine: {
              lineStyle: {
                  color: "#b0c5e4",
              }
          	}
		    },
		    yAxis: {
		        type: 'category',
		        data: ['环境', '服务', '卫生', '价格', '交通', '安全'],
		        axisLine: {
              lineStyle: {
                  color: "#b0c5e4",
              }
          	}
		    },
		    series: [
		        {
		            name: '2011年',
		            type: 'bar',
		            itemStyle:{
								        normal:{
								           color:'#00FF00'
								        }
								  },
		            data: [100, 90, 88, 80, 99, 70]
		        }

		    ]
			};
			var myChart = echarts.init(document.getElementById('btb06'))
			myChart.clear();
     		 myChart.setOption(option);
	     },
	  },
	  updated:function(){
  		this.isShow = true;
  		layui.use('form', function(){
		  var form = layui.form;
		  form.render();

		});

 	  },
	}
</script>
<style>

	@import '../../../static/other/css/zlgj/index.css'

</style>
